<template>
	<view class="container">
		
		<!--搜索框-->
		<view class="search-box">
			<navagationBar>
				<template>
					<view class="search" >
						<view class="search-input" @click.stop="handleSearch">
							<u-search
								placeholder="通过关键字搜索内容" 
								:height="getSystemInfo.menuHeight * 2" 
								v-model="value" 
								:showAction="false" 
								bgColor="#F3F3F3" 
								placeholderColor="rgba(#000000, .26)"
								disabled
							>
							</u-search>
						</view>
						<view class="search-text" @click.stop="handleGotoMine">我的</view>
					</view>
				</template>
			</navagationBar>
		</view>
		
		<view class="type-content" v-if="typeShow" :style="{top: `${getSystemInfo.navBarHeight}px`}">
			<u-tabs
				:list="typeList"
				:activeStyle="{ color: '#EE0A24' }"
				lineColor="#EE0A24"
				lineWidth="80"
				@click.stop="clickTypeList"
			></u-tabs>
		</view>
		
		<!-- 64 = type-content 的高度 -->
		<view class="msg-content" v-if="msgData.length" :style="{marginTop: `${ typeShow ? getSystemInfo.navBarHeight + 64 : '64' }px`}">
			<view class="mc-item" v-for="item in msgData" :key="item.id">
				<view class="mci-top" @click.stop="handleMsgDetail(item)" >
					<view class="mt-left">
						<image :src="item.terminalImg || 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'" mode=""></image>
					</view>
					<view class="mt-right">
						<view class="mtr-top">
							<view class="mtrt-name">{{ item.name || '' }}</view>
						</view>
						<view class="mtr-bottom">
							<text>{{ item.showProvince || '' }}</text>
							<text style="margin-left: 8rpx;">{{ item.showCity || '' }}</text>
						</view>
					</view>
				</view>
				<view class="mci-mid" >
					<view class="mm-content" @click.stop="handleMsgDetail(item)"> {{ item.content }}</view>
					<view class="mm-video" v-if="item.video && item.video.length"	:style="{ width: item.videoWidth ? `${item.videoWidth}rpx` : '446rpx', height: item.videoHeight ? `${item.videoHeight}rpx` : '340rpx' }">
						<video
							:src="item.video"
							:poster="item.coverVideo || ''"
							object-fit="cover"
						></video>
					</view>
					<view class="mm-img" v-if="item.img && item.img.length">
						<view :class="['mmv-list', 'mmv-list-' + item.img.split(',').length]">
							<image
								v-for="(src, vIndex) in item.img.split(',')"
								:key="vIndex"
								:src="src || currentImg"
								mode="aspectFill"
								@click.stop="handlePreviewImage(item.img.split(','), vIndex)"
							/>
						</view>
					</view>
				</view>
				
				<view class="mci-btm">
					<view class="mcib-left">
						<view class="mtrt-time">{{ formatDate(item.createdTime) || '' }}</view>
					</view>
					<view class="mcib-right">
						<view class="mb-box" @click.stop="handleShare(item)">
							<view class="mbb-img">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_share.png" mode=""></image>
							</view>
							<view class="mbb-action">{{ item.forward || 0 }}</view>
						</view>
						<view class="mb-box" @click.stop="handleLikes(item)">
							<view class="mbb-img">
								<image :src="`https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/${ item.isLikes ? 'ic_praise' : 'ic_unPraise' }.png`" mode=""></image>
							</view>
							<view class="mbb-action" :style="{ color: item.isLikes ? 'rgba(207, 26, 27, 1)' : 'rgba(0, 0, 0, 0.65)'}">{{ item.likes || 0 }}</view>
						</view>
						<view class="mb-box" @click.stop="handleComment(item)">
							<view class="mbb-img">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_xinxi.png" mode=""></image>
							</view>
							<view class="mbb-action">{{ item.commentNum || 0 }}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="tabs-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
		
		<view v-if="!msgData.length" class="empty">
		 <image src="@/static/empty.png"></image>
		 <text>无数据</text>
		</view>
		
		<!-- 发布按钮 -->
		<view class="btn-content" @click.stop="handleRelease">
			<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_release.png" mode=""></image>
		</view>
		
		<!-- 发布 -->
		<u-action-sheet
			class="action-sheet"
			:show="actionShow"
			:actions="actionList"
			round="16"
			:closeOnClickAction="true"
			:closeOnClickOverlay="true"
			cancelText="取消"
			cancelTextClass="cancelTextClass"
			@select="selectClick"
			@close="selectCancel"
			>
		</u-action-sheet>
			
		<!-- 分享 -->
		<u-popup
			:show="popupShow"
			:round="20"
			mode="bottom"
			@close="popupClose"
			@open="popupOpen"
			:closeOnClickOverlay="true"
			>
			<view class="popup-content">
				<view class="pc-title">分享到</view>
				<view class="pc-list">
					<view class="pc-item" v-for="item in popupList" :key="item.type" @click.stop="handlePopupClick(item.type)">
						<view class="pci-box" v-if="item.type === 'weChat'">
							<button open-type="share">
								<image class="pci-image" :src="item.url" mode=""></image>
								<view  class="pci-label" >
									{{ item.label }}
								</view>
							</button>
						</view>
						<view class="pci-box" v-else>
							<image class="pci-image" :src="item.url" mode=""></image>
							<view  class="pci-label" >
								{{ item.label }}
							</view>
						</view>
					</view>
				</view>
				<view class="pc-btn" @click.stop="popupShow = false">取消</view>
			</view>
		</u-popup>
	
		<!-- 举报、屏蔽 -->
		<u-action-sheet
			class="action-sheet"
			:round="20"
			:show="operShow"
			:actions="operList"
			:closeOnClickAction="true"
			:closeOnClickOverlay="true"
			cancelText="取消"
			cancelTextClass="cancelTextClass"
			@select="operSelectClick"
			@close="operSelectCancel"
		></u-action-sheet>
		
		<!-- 评论 弹窗 -->
		<u-popup
			:show="popupShowCom"
			:round="20"
			mode="bottom"
			@close="popupCloseCom"
			@open="popupOpenCom"
			:closeOnClickOverlay="true"
		>
		<!-- :style="{marginTop: `${getSystemInfo.navBarHeight}px`}" -->
			<view class="com-content" >
				<u--textarea
					v-model="comValue"
					@confirm="comConfirm"
					:focus="comFocus"
					maxlength="200"
					border="none"
					autoHeight
					placeholder="发表我的看法..."
					:showConfirmBar="false"
					:cursorSpacing="getDeviceInfo.system.includes('Android') ? 0 : 30"
				>
				<!-- 判断设备如果是ios 则底部距离设置为30， Android则不用 -->
				</u--textarea>
				<view class="cc-done-btn" @click.stop="comConfirm">
					发送
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import navagationBar from '@/components/navigationBar.vue'
	import { mapGetters } from 'vuex'
	import currentImg from '@/static/currentImg.png'
	import { baseUrl } from '@/common/config'
	import getAppLink from '@/mixins/getAppLink.js'
	
	export default {
		components: {
			navagationBar
		},
		mixins: [getAppLink],
		data() {
			return {
				baseUrl,
				currentImg,
				typeList: [],
				msgData: [],
				total: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				formDatas: {
					pageNum: 1,
					pageSize: 10,
					topicId: null
				},
				requestFlag: true,	// 请求开关
				actionShow: false,
				actionList: [
					{
						name: '短视频',
						type: 'video',
						subname: '可发布5~30秒的视频'
					},
					{
						name: '发动态',
						type: 'img'
					}
				],
				popupShow: false,
				popupList: [
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_weChat.png',
						label: '微信好友',
						type: 'weChat'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_copy.png',
						label: '复制链接',
						type: 'copy'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_report.png',
						label: '举报',
						type: 'report'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_shield.png',
						label: '屏蔽',
						type: 'shield'
					}
				],
				shareObj: {},	// 点击的那一条信息
				operShow: false,	// 举报、屏蔽选择列表
				operType: null,	// 区分举报 还是 屏蔽
				operList: [],	// 选项列表
				reportList: [ // 举报列表
					{
						name: '淫秽色情',
						type: 1
					},
					{
						name: '操作违规',
						type: 2
					},
					{
						name: '言语辱骂',
						type: 3
					},
					{
						name: '营销广告',
						type: 4
					},
				],
				shieldList: [ // 屏蔽列表
					{
						name: '屏蔽@作者昵称',
						type: 'user'
					},
					{
						name: '屏蔽此条卡友圈',
						type: 'one'
					},
				],
				isShow: false,	// 用于onshow判断是否调用接口
				maxDuration: 30, // 视频最大时长
				minDuration: 5, // 视频最小时长
				cacheShieldUser: [],	// 屏蔽的用户
				cacheShieldThis: [],	// 屏蔽的多条
				
				// 评论
				comValue: '',
				popupShowCom: false,
				comFocus: false,
				textAreaBottom: 0, // 输入框聚焦时底部与键盘的距离， ios - 30
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo', 'getNowLocation', 'getDeviceInfo']),
			...mapGetters('user', ['getUserInfo']),
			formatDate(){
				return (date) => {
					const time = new Date(date).getTime()
					// 当前时间
					const now = new Date().getTime()
					// 发布日期 大于 当前往前推24小时的 直接显示日期(今天之前的)
					// if(time <= new Date(new Date().setHours(0, 0, 0, 0)).getTime()){
					if(time < now - 1000 * 60 * 60 * 24){
						return date.substring(0, date.lastIndexOf(':'))
					}else {
						if(time > now - 1000 * 60){
							return '现在'
						}else if(time > now - 1000 * 60 * 60){
							const min = parseInt((now - time) / 1000 / 60 % 60)
							return min + '分钟前'
						}else if(time > now - 1000 * 60 * 60 * 24){
							const hour = parseInt((now - time) / 1000 / 60 / 60 % 24)
							return hour + '小时前'
						}
					}
				}
			},
			typeShow(){
				return this.typeList.length > 3
			},
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
		},
		// 分享给朋友
		onShareAppMessage(res){
			if(res.from === 'button'){
				this.accumulateShare()
				
				return {
					title: this.shareObj.content,
					path: this.shareObj.id ? `/circlePack/detail/index?id=${this.shareObj.id}&shieldUser=0&shieldThis=0` : `/pages/circle/index`,
					imageUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/share_cover.png'
				}
			}
			
		},
		onLoad(){
			this.backTop()
		},
		onShow(){
			// 读取在列表页屏蔽的数据
			if(uni.getStorageSync('circle_cacheShieldUser')){
				this.cacheShieldUser = JSON.parse(uni.getStorageSync('circle_cacheShieldUser')) || []
			}
			if(uni.getStorageSync('circle_cacheShieldThis')){
				this.cacheShieldThis = JSON.parse(uni.getStorageSync('circle_cacheShieldThis')) || []
			}
			
			// 操作删除，返回列表页刷新数据
			if(uni.getStorageSync('circleDetailId_top')){
				this.isShow = true
			}
			uni.removeStorageSync('circleDetailId_top')
			
			// 操作屏蔽、点赞，返回列表页刷新数据
			if(uni.getStorageSync('circleDetailId')){
				// this.msgData = []
				// this.formDatas.pageNum = 1
				this.isShow = true
			}
			uni.removeStorageSync('circleDetailId')
			
			if(this.isShow){
				this.backTop()
				this.msgData = []
				this.formDatas.pageNum = 1
			}
			
			this.getTypeListData()
			this.getMsgListData()
		},
		methods: {
			// 校验卡圈状态是否可被操作
			async existShow(id){
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'GET',
						url: '/terminal-serve-center/app/cars/existShow',
						data: {
							id
						}
					}).then(res => {
						resolve(res.datas.existFlag)
					}).catch(res => {
						reject(res.datas.existFlag)
					})
				})
			},
			async comSend(){
				await this.$request({
					method: 'POST',
					url: '/terminal-serve-center/merchantShowComment/comment',
					data: {
						userId: this.getUserInfo.id,
						showId: this.shareObj.id,
						content: this.comValue,
						province: this.getNowLocation.province || '',
						city: this.getNowLocation.cityName || ''
					}
				}).then(res => {
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					})
					this.shareObj.commentNum += 1
					this.popupCloseCom()
				}).catch(res => {
					uni.showToast({
						title: res.respMsg ? res.respMsg.split(':')[1] : '评论失败',
						icon: 'none'
					})
				})
			},
			comConfirm(){
				if(!this.comValue){
					return 
				}else {
					this.comSend()
				}
			},
			popupOpenCom(){
				this.comFocus = true
			},
			popupCloseCom(){
				this.comValue = ''
				this.shareObj = {}
				this.comFocus = false
				this.popupShowCom = false
			},
			async handleComment(item){
				const checkStatus = await this.existShow(item.id)
				if(checkStatus){
					this.shareObj = item
					this.popupShowCom = true
					this.$forceUpdate()
				}else {
					uni.showToast({
						title: '操作失败，该信息已被删除或隐藏',
						icon: 'none'
					})
					
					setTimeout(() => {
						this.handleReset()
						this.getMsgListData()
					}, 1000)
				}
			},
			
			// 累计分享次数
			accumulateShare(){
				this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/storeShowForward',
					data: {
						id: this.shareObj.id
					}
				})
				this.msgData.find(i => i.id === this.shareObj.id).forward = this.shareObj.forward + 1
				this.isShow = false
			},
      backTop(){
        // 回到顶部
        uni.createSelectorQuery().select(".msg-content")
					.boundingClientRect(data => { //目标节点
						uni.createSelectorQuery().select(".container")
								.boundingClientRect((res) => { //最外层盒子节点
									uni.pageScrollTo({
										duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
										scrollTop: 0, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
									})
								}).exec()
					}).exec();
      },
			operSelectCancel(){
				this.operShow = false
			},
			operSelectClick(data){
				this.operShow = false
				if(this.operType === 'report'){	// 举报
					this.handleReport(data.type)
				}else {	// 屏蔽
					// 0-未屏蔽, 1-已屏蔽
					if(data.type === 'user'){	// 屏蔽用户
						this.handleShield(this.shareObj.shieldUser === 0 ? 1 : 3, data.type)
					}else {		// 屏蔽此条
						this.handleShield(this.shareObj.shieldThis === 0 ? 2 : 4, data.type)
					}
				}
			},
			// 举报函数
			async handleReport(type){
				await this.$request({
					method: 'POST',
					url: '/terminal-serve-center/app/cars/reportShow',
					data: {
						id: this.shareObj.id,
						type
					}
				}).then(res => {
					uni.showToast({
						title: '举报成功',
						icon: 'none'
					})
					this.shareObj = {}
				}).catch(res => {
					uni.showToast({
						title: '您已经举报过了',
						icon: 'none'
					})
				})
			},
			// 屏蔽函数
			async handleShield(type, dataType){
				// 	屏蔽类型(1-屏蔽用户,2-屏蔽卡友圈,3-取消屏蔽用户,4-取消屏蔽卡友圈)
				await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/blockShow',
					data: {
						userId: this.getUserInfo.id,
						id: this.shareObj.id,
						showUserId: this.shareObj.userId,
						type
					}
				}).then(res => {
					// 0-未屏蔽, 1-已屏蔽
					if(dataType === 'user'){	// 屏蔽用户
						this.msgData.find(i => i.id === this.shareObj.id).shieldUser = this.shareObj.shieldUser === 0 ? 1 : 0
						// 屏蔽的用户id，
						if(!this.cacheShieldUser.includes(this.shareObj.id)){
							this.cacheShieldUser.push(this.shareObj.id)
						}
						uni.setStorageSync('circle_cacheShieldUser', JSON.stringify(this.cacheShieldUser))
					}else {		// 屏蔽此条
						this.msgData.find(i => i.id === this.shareObj.id).shieldThis = this.shareObj.shieldThis === 0 ? 1 : 0
						// 屏蔽的多条id，
						if(!this.cacheShieldThis.includes(this.shareObj.id)){
							this.cacheShieldThis.push(this.shareObj.id)
						}
						uni.setStorageSync('circle_cacheShieldThis', JSON.stringify(this.cacheShieldThis))
					}
					
					// 取消屏蔽，后在本地缓存中过滤掉
					if(type === 3){
						this.cacheShieldUser = this.cacheShieldUser.filter(i => i !== this.shareObj.id)
						uni.setStorageSync('circle_cacheShieldUser', JSON.stringify(this.cacheShieldUser))
					}else if(type === 4) {
						this.cacheShieldThis = this.cacheShieldThis.filter(i => i !== this.shareObj.id)
						uni.setStorageSync('circle_cacheShieldThis', JSON.stringify(this.cacheShieldThis))
					}
					
					this.shareObj = {}
					
					uni.showToast({
						title: (type === 1 || type === 2) ? '屏蔽成功' : '取消屏蔽成功',
						icon: 'none'
					})
					
				}).catch(res => {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
				})
			},
			async handlePopupClick(type){
				// 屏蔽操作不做校验，其它操作需要校验卡友圈的状态才能继续
				if(type !== 'shield'){
					const checkStatus = await this.existShow(this.shareObj.id)
					if(!checkStatus){
						uni.showToast({
							title: '操作失败，该信息已被删除或隐藏',
							icon: 'none'
						})
						
						setTimeout(() => {
							this.popupClose()
							this.handleReset()
							this.getMsgListData()
						}, 1000)
						return false
					}
				}
				
				
				if(type === 'weChat'){	// 微信-分享
				// 通过设置 button open-type="share", 触发onShareAppMessage，这边不需要写逻辑
				}else if(type === 'copy'){	// 复制
						let params = {
							path: '/circlePack/detail/index',
							query: `id=${this.shareObj.id}&shieldUser=${this.shareObj.shieldUser}&shieldThis=${this.shareObj.shieldThis}`, // 短链的入参
						}
						const url = await this.getShareLink(params)
						console.log('返回的url：', url);
						if(url && url.length){
							uni.setClipboardData({
								data: url, // 复制的内容 
								success: res => {
									uni.showToast({
										title: '复制成功',
										duration: 1000
									})
								}
							});
							this.accumulateShare()
						}else {
							uni.showToast({
								title: '复制失败',
								icon: 'none',
							})
						}
				}else if(type === 'report'){	// 举报
					this.operType = 'report'
					this.operList = this.reportList
					this.operShow = true
				}else{	// 屏蔽
					this.operType = 'shield'
					 // 0-未屏蔽, 1-已屏蔽
					this.shieldList[0].name = this.shareObj.shieldUser === 0 ? `屏蔽@${this.shareObj.createdUser}` : `取消屏蔽@${this.shareObj.createdUser}`
					this.shieldList[1].name = this.shareObj.shieldThis === 0 ? `屏蔽此条卡友圈` : '取消屏蔽此条卡友圈'
					this.operList = this.shieldList
					this.operShow = true
				}
				this.popupShow = false
			},
			// 分享 等 操作
			handleShare(item){
				this.popupShow = true
				this.shareObj = item
			},
			popupClose(){
				this.popupShow = false
				this.shareObj = {}
			},
			popupOpen(){
				
			},
			handleRelease(){
				this.actionShow = true
			},
			selectCancel(){
				this.actionShow = false
			},
			// 发布
			async selectClick(data){
				if(data.type === 'img'){	// 发动态
					uni.navigateTo({
						url: `/circlePack/release/dynamic`
					})
				}else {	// 短视频
					uni.navigateTo({
						url: `/circlePack/release/video`
					})
				}
			},
			// 点赞
			async handleLikes(item){
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/storeShowLikes',
					data: {
						userId: this.getUserInfo.id,
						id: item.id,
						isLikes: item.isLikes ? 0 : 1
					},					
				}).then(res => {
					item.likes =  item.isLikes ? item.likes - 1 : item.likes + 1
					item.isLikes =  item.isLikes ? 0 : 1
				}).catch(res => {
					uni.showToast({
						title: res.respMsg ? res.respMsg.split(':')[1] : '操作失败',
						icon: 'none'
					})
					
					setTimeout(() => {
						this.handleReset()
						this.getMsgListData()
					}, 1000)
					return false
				})
			},
			// 图片预览
			handlePreviewImage(urls, current){
				uni.previewImage({
					current,
					urls,
					success: res => {
						// 图片预览成功够，将isShow设置为false，防止预览状态结束，再次请求列表接口
						this.isShow = false
					},
					fail: res => {},
				})
			},

			handleSearch(){
				uni.navigateTo({
				  url: `/circlePack/search/index`
				})
			},
			handleGotoMine(){
				uni.navigateTo({
				  url: `/circlePack/mine/index`
				})
				// 把屏蔽用户，屏蔽卡友圈的id，缓存到本地，在“我的发布页面”读取
				uni.setStorageSync('circle_cacheShieldUser', JSON.stringify(this.cacheShieldUser))
				uni.setStorageSync('circle_cacheShieldThis', JSON.stringify(this.cacheShieldThis))
				this.cacheShieldUser = []
				this.cacheShieldThis = []
			},
			handleReset(){
				this.msgData = []
				this.formDatas.pageNum = 1
				this.loadMoreText = "加载中...",
				this.actionShow = false
				this.showLoadMore = false
			},
			async handleMsgDetail(item){
				const checkStatus = await this.existShow(item.id)
				if(!checkStatus){
					uni.showToast({
						title: '操作失败，该信息已被删除或隐藏',
						icon: 'none'
					})
					
					setTimeout(() => {
						this.handleReset()
						this.getMsgListData()
					}, 1000)
					return false
				}
				
				const { id, shieldUser, shieldThis } = item
				uni.navigateTo({
				  url: `/circlePack/detail/index?id=${id}&shieldUser=${shieldUser}&shieldThis=${shieldThis}`
				})
				this.isShow = false
			},
			clickTypeList(item){
				this.handleReset()
				if(this.formDatas.topicId !== item.id){
					this.formDatas.topicId = item.id
					this.getMsgListData()
					this.backTop()
				}
			},
			async getMsgListData(){		
				// requestFlag 开关控制，避免从详情页返回到列表页，短时间内请求2次
				if(!this.requestFlag){
					return false
				}
				this.requestFlag = false
				
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/getStoreShowList',
					data: {
						...this.formDatas,
						userId: this.getUserInfo.id,
						isAPP: 1,
						isVisible: 0
					}
				})
				const data = res.datas.data
				data.forEach(i => {
					// shieldUser-用户  shieldThis-此条
					i.shieldUser = 0  // 0-未屏蔽, 1-已屏蔽
					i.shieldThis = 0
				})
				// this.msgData = this.msgData.concat(data)
				this.msgData = this.unique(this.msgData.concat(data))
				this.total = res.datas.count
				uni.hideLoading()
				uni.stopPullDownRefresh();
				
				setTimeout(() => {
					this.requestFlag = true
				}, 500)
			},
			// 通过id，过滤重复数据
			unique(arr) {
				const res = new Map()
				return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, 1))
			},
			async getTypeListData(){
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/topic/classify/page',
					data: {
						pageNum: 1,
						pageSize: 99999,
						showFlag: 1
					}
				})
				this.typeList = res.datas && res.datas.data && res.datas.data.length && res.datas.data.reduce((pre, cur) => {
					const obj = {
						name: cur.topicClassifyName,
						id: cur.id
					}
					pre.push(obj)
					return pre
				}, [])
				
				if(this.typeList.length){
					this.typeList.unshift({ name: '全部', id: ''})
				}
			},
		},
		// 需要上滑请求则放出来
		onReachBottom() {
			if(!this.requestFlag){
				return false
			}
			if (this.msgData.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.formDatas.pageNum += 1
			this.getMsgListData()
		},
		onPullDownRefresh() {
			this.msgData = []
			this.formDatas.pageNum = 1
			this.getMsgListData();
		},
		// 点击tabBar把当前的下标传入全局
		onTabItemTap(item) {
			this.$store.state.global.tabBarIndex = item.index
			this.isShow = true
			this.backTop()
		},
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	width: 100%;
	.search {
		z-index: 10;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		.search-input {
			width: 80%;
			/deep/ .u-icon__icon {
			    font-size: 22px !important;
			}
		}
		.search-text {
			margin-left: 30rpx;
			color: #CF1A1B;
		}
	}
	
	
	.type-content {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 20rpx;
		/deep/ .u-tabs__wrapper__nav__line {
			margin-left: 5%;
		}
	}
	
	.msg-content {
		// padding-top: 20rpx;
		box-sizing: border-box;
		overflow: auto;
		.mc-item {
			// &:not(:nth-last-child(1)){
				margin-top: 20rpx;
			// }
			box-sizing: border-box;
			// padding: 32rpx 32rpx 24rpx;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			.mci-top {
				display: flex;
				width: 100%;
				padding: 32rpx;
				box-sizing: border-box;
				.mt-left {
					margin-right: 16rpx;
					image {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
					}
			}
				.mt-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 12rpx 0;
					.mtr-top {
						display: flex;
						justify-content: space-between;
						.mtrt-name {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.85);
						}
					}
					.mtr-bottom {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.45);
					}
				}
			}
			
			.mci-mid {
				padding: 0 32rpx;
				box-sizing: border-box;
				.mm-content {
					margin-bottom: 24rpx;
					color: rgba(0, 0, 0, 0.85);
					font-size: 14px;
					white-space: pre-wrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				// 视频
				.mm-video {
					margin: 26rpx 0;
					video {
						width: 100%;
						height: 100%;
					}
				}
				// 图片
				.mm-img {
					margin: 26rpx 0;
					.mmv-list {
						display: flex;
						flex-wrap: wrap;
						gap: 6rpx;
						image {
							// border-radius: 12rpx;
						}
					}
				}
				// 一张图片
				.mmv-list-1 {
					image {
						width: 426rpx;
						height: 288rpx;
					}
				}
				.mmv-list-2, .mmv-list-4 {
					image {
						width: 49%;
						height: 288rpx;
					}
				}
				.mmv-list-3 {
					image {
						width: 32%;
						height: 224rpx;
					}
				}
			}
			
			.mci-btm {
				border-top: 1px solid rgba(0, 0, 0, 0.10);
				// padding: 24rpx 100rpx;
				padding: 32rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mcib-left {
					.mtrt-time {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.45);
						min-width: 230rpx;
					}
				}
				.mcib-right {
					width: 100%;
					max-width: 50vw;
					display: flex;
					justify-content: space-between;
					.mb-box {
						display: flex;
						align-items: center;
						.mbb-img {
							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
						.mbb-action {
							margin-left: 16rpx;
							color: rgba(0, 0, 0, 0.65);
							font-size: 14px;
							height: 44rpx;
						}
					}
				}

			}
		}
	}

	// 无内容
	.empty {
		width: 100%;
		height: 100%;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		image {
			width: 220px;
			height: 180px;
		 }
		text {
			font-size: 30rpx;
			color: rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	}
	
	// 加载中、
	.tabs-loadmore-text {
		text-align: center;
		padding: 10px;
	}
	
	// 发布
	.btn-content {
		width: 112rpx;
		height: 112rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
		border-radius: 50%;
		position: fixed;
		right: 18rpx;
		bottom: 18rpx;
		z-index: 9;
	}
	
	// action-sheet
	.action-sheet {
		/deep/ .u-reset-button .u-action-sheet__item-wrap__item .u-action-sheet__item-wrap__item__name {
			color: rgba(0, 0, 0, 0.85);
		}
		/deep/ .u-gap {
			height: 20rpx !important;
			background-color: #F6F6F7 !important;
		}
		/deep/ .cancelTextClass {
			padding: 30rpx 16rpx 68rpx;
			background-color: #ffffff;
		}
		/deep/ .u-action-sheet__cancel-text {
			padding: 26rpx 0;
			background-color: rgba(207, 26, 27, 1);
			color: #ffffff;
			border-radius: 8rpx;
		}
	}
	
	// 分享
	.popup-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F7F8FA;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		.pc-title {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 14px;
			color: #323233;
			background-color: #ffffff;
		}
		.pc-list {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 48rpx;
			background-color: #ffffff;
			.pc-item {
				padding-bottom: 32rpx;
				.pci-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					button {
						padding: 0;
						border: none;
						background-color: transparent;
						box-shadow: none;
						font-size: 12px;
						color: #646566;
						line-height: 16px;
						&::after {
							border: none;
							height: auto;
						}
					}
				}
				.pci-image {
					width: 96rpx;
					height: 96rpx;
					vertical-align: bottom;
				}
				.pci-label {
					margin-top: 16rpx;
					font-size: 12px;
					color: #646566;
				}
			}
		}
		.pc-btn {
			margin-top: 16rpx;
			width: 100%;
			text-align: center;
			padding: 26rpx 0;
			font-size: 16px;
			color: #646566;
			background-color: #ffffff;
		}

	}
	
	// 评论
	.com-content {
		width: 100%;
		padding: 24rpx 32rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: rgba(245, 245, 246, 1);
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		/deep/ .u-textarea {
			border-radius: 38rpx;
			.input-placeholder, 
			.u-textarea__field {
				font-size: 13px !important;
			}
			.input-placeholder {
				color: rgba(0, 0, 0, 0.45) !important;
			}
		}
		.cc-done-btn {
			margin-left: 20rpx;
			width: 180rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			font-size: 14px;
			color: #ffffff;
			background-color: #CF1A1B;
		}
	}


}
</style>
